<template>
    <div :style="getcss" v-on="$listeners">
        <div class="horsepalne"> <span :style="cssstyle">{{ val }}</span>
        </div>
    </div>
</template>
<script>
export default {
    props: ['w', 'h', 'val', 'cssstyle', 'cycleanimation'],
    computed: {
        getcss() {
            return (
                'overflow:hidden;width:' +
                this.w +
                'px;height:' +
                this.h +
                'px;   white-space: nowrap;--cycleanimation:' + this.cycleanimation + 's;'
            )
        },
    },
}
</script>
<style scoped>
.horsepalne {
    -webkit-animation: marquee var(--cycleanimation) linear infinite;
    animation: marquee var(--cycleanimation) linear infinite;

}

@keyframes marquee {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.text {
    white-space: nowrap;
}
</style>
